/**
 * Created by BaiChangHao on 2018/6/28.
 */
'use strict';

import React, { Component } from 'react';
import PropTypes from "prop-types";
import {
    View,
    StyleSheet,
    Image,
    TouchableHighlight,
    UIManager,
    findNodeHandle,
    Dimensions
} from 'react-native';

import Label from '../label';
import SearchBar from '../searchBar';
import ClickAbleText from './ClickAbleText';
import Color from '../../config/theme/standard/color';

import Marquee from '../marquee/index.js/index.js';
// import Constant from '../../config/theme/standard/constant';
import Fonts from '../../config/theme/standard/fonts';

import {getNavBarStyle} from './navBarStyle';
import Variables from '../../config/theme/styles/index';

// const screenWidth = Constant.screenWidth;

export default class NavBarComponent extends Component{
    constructor(props) {
        super(props);
    }

    listenClick = () => {
        if(typeof this.props.listenImgClickFunc == 'function' && !this.props.disabled){
            this.props.listenImgClickFunc();
        }
    };

    renderListenImg(){
        let container = [];
        if(this.props.listenImg){
            let style = [this.props.listenImgStyle];
            let widthTmp = 45;
            if(this.props.headerType == 'headerExtr'){
                style.push({marginRight:6,width:18.5,height:18});
                widthTmp = 40;
            }
            container.push({width:widthTmp,paddingRight:0});
            if(this.props.headerStyle == 'small'){
                container.push({height:44});
            }
            let listenItem={
                title:this.props.listenImg,
                hasLeftImage:false,
                isImage:true,
                clickFunc:this.listenClick,
                align:'right',
                container:container,
                listenImgStyle:style,
                disabled:this.props.disabled
            };
            return <ClickAbleText {...listenItem}/>
        }
    }

    renderRight(){
        let { styles,navBarStyle} = getNavBarStyle(Variables);
        let container = [];
        if(this.props.listenImg){
            container.push({width:45});
        }
        if(this.props.headerStyle == 'small'){
            container.push({height:44});
        }
        if(this.props.headerType == 'header'){
            if(this.props.rightButtonType=='text'){
                let clickAbleTextAttr={
                    title:this.props.rightButton,
                    hasLeftImage:false,
                    clickFunc:this.props.rightButtonFunc,
                    isImage:false,
                    align:'right',
                    color:this.props.color,
                    rightButtonColor:this.props.rightButtonColor || navBarStyle.navBarRightTextColor,
                    fontFamily:this.props.fontFamily,
                    buttonFontSize:this.props.buttonFontSize || navBarStyle.navBarRightTextFontSize,
                    disabled:this.props.disabled
                };
                return <ClickAbleText  {...clickAbleTextAttr}/>
            }else if(this.props.rightButtonType=='more'){
                let rightImg;
                if(this.props.rightButtonImage){
                    rightImg = this.props.rightButtonImage;
                }else{
                    if(this.props.headerStyle == 'small'){
                        rightImg = require('../../assets/navBar_more.png');
                    }else{
                        rightImg = require('../../assets/navBar_more_right_btn.png');
                    }
                }
                let imgStyle = this.props.headerStyle == 'small' ? {width:15.5,height:3.5,resizeMode:'contain'} : null;
                let clickAbleTextAttr={
                    title:rightImg,
                    hasLeftImage:false,
                    isImage:true,
                    clickFunc:this.props.rightButtonFunc,
                    align:'right',
                    rightButtonImageStyle:[this.props.rightButtonImageStyle || {width:navBarStyle.navBarRightIcon,height:navBarStyle.navBarRightIcon,resizeMode: 'contain',marginRight:10},imgStyle],
                    container:container,
                    disabled:this.props.disabled
                };
                return <ClickAbleText {...clickAbleTextAttr}/>
            }
        }else if(this.props.headerType == 'headerExtr'){
            let style = this.props.headerType == 'headerExtr' ? [this.props.rightButtonImageStyle,{marginRight:6,width:28,height:28}] : this.props.rightButtonImageStyle;
            let clickAbleTextAttr={
                title:this.props.rightButtonImage,
                hasLeftImage:false,
                isImage:true,
                clickFunc:this.props.rightButtonFunc,
                align:'right',
                rightButtonImageStyle:style,
                container:container,
                disabled:this.props.disabled
            };
            return <ClickAbleText {...clickAbleTextAttr}/>
        }
    }

    renderTitle(){
        let { styles,navBarStyle} = getNavBarStyle(Variables);
        if(this.props.headerType == 'header'){
            if(this.props.titleImage){
                return (<Image
                    style={styles.headerTitleImage}
                    source={this.props.titleImage}
                />)
            }else{

                let color=this.props.color?this.props.color:navBarStyle.navBarTitleColor;
                let fontFamily=this.props.fontFamily?this.props.fontFamily:null;
                let titleFontSize=this.props.titleFontSize?this.props.titleFontSize:navBarStyle.navBarTitleFontSize;
    
                let returnElement=null;
    
                 
                let titleParams=this.props.titleParams;
                //
                if(!titleParams.conWidth){
                    titleParams.conWidth=Dimensions.get('window').width*0.6;
                };
                //
                if(!titleParams.fontWeight){
                    titleParams.fontWeight='bold';
                };
                //
                if(this.props.titleParams.scroll && typeof this.props.titleParams.scroll=='boolean' ){
                    titleParams.scroll=true;
                    
                    returnElement=(
                        <Marquee
                            showClose={false}
                            showLine={false}
                            text={[this.props.title]}
                            textColor={color}
                            titleFontSize={titleFontSize}
                            fontFamily={fontFamily}
                            {...titleParams}
                        />
                    );
                }else{
                    titleParams.scroll=false;
                   
                    returnElement=(
                        <TextElement
                            text={this.props.title}
                            type="title" 
                            align="center"
                            customStyle={[styles['titleText'+Util.firstUpperCase(this.props.type)],{color:color},{fontFamily:fontFamily},{fontSize:titleFontSize}]}
                        />
                    );
                };
    
                return (
                    <View
                        onLayout={(e)=>this._onLayout(e)}
                        style={{flexDirection:'row',alignSelf:'center',justifyContent: 'center',width:titleParams.conWidth}}
                    >
                        {returnElement}
                        {/*<TextElement
                            text={this.props.title}
                            type="title" align="center"
                            customStyle={[styles['titleText'+Util.firstUpperCase(this.props.type)],color,fontFamily,titleFontSize]}
                        />
                        <Marquee
                            showClose={false}
                            showLine={false}
                            text={[this.props.title]}
                            textColor={color}
                            titleFontSize={titleFontSize}
                            fontFamily={fontFamily}
                            {...titleParams}
                        />*/}
                    </View>
                )
            }
        }else if(this.props.headerType == 'headerExtr'){
                return (<View style={styles.middleBox}>
                    <SearchBar placeholder={"搜产品 搜功能"} showSpeechIcon={true} showRightButton={false} textAlign={'left'} hasBackground={false} inputType={'small'}/>
                </View>);
        }
    }

    renderLeft(){
        let container = [{justifyContent:'flex-start',paddingRight:0}];
        let hasLeftImage = this.props.headerType == 'headerExtr' ? true : this.props.hasLeftImage;
        let buttonContent = this.props.leftButton;
        let buttonFontSize = this.props.buttonFontSize;
        let leftImage,leftImageStyle,containerStyle = null;
        if(this.props.headerType == 'headerExtr'){
            buttonContent = this.props.logined ? this.props.btnText : this.props.location;
            leftImage = this.props.logined ? require('../../assets/navBar_logout.png') : require('../../assets/navBar_location.png');
            leftImageStyle = {width:15, height:19, resizeMode:'contain'};
            containerStyle = {marginLeft:13,marginRight:5};
            buttonFontSize = 12;
        }
        if(this.props.headerStyle == 'small'){
            container.push({height:44});
        }
        let clickAbleTextAttr={
            hasLeftImage:hasLeftImage,
            leftButtonImage:this.props.leftButtonImage,
            title:buttonContent,
            isImage:false,
            align:'left',
            clickFunc:this.props.leftButtonFunc,
            color:this.props.color,
            fontFamily:this.props.fontFamily,
            buttonFontSize:buttonFontSize,
            container:container,
            leftImage:leftImage,
            leftImageStyle:leftImageStyle,
            imgContainerStyle:containerStyle,
            headerStyle:this.props.headerStyle,
            disabled:this.props.disabled,
            leftButtonImageStyle:this.props.leftButtonImageStyle
        };

        return(<ClickAbleText {...clickAbleTextAttr}/>)
    }

    _onLayout(event){
        let {height} = event.nativeEvent.layout;
        if(typeof this.props.onLayout == 'function'){
            this.props.onLayout(height);
        }
    }

    render(){
        let { styles} = getNavBarStyle(Variables);
        let backgroundColor=this.props.backgroundColor?{backgroundColor:this.props.backgroundColor}:null;
        let borderBottomColor=this.props.borderBottomColor?{borderBottomColor:this.props.borderBottomColor}:null;
        let flexContainerStyle = [styles.flexContainer];
        let cellCenterStyle = [styles.cellCenter];
        if(this.props.headerStyle == 'small'){
            flexContainerStyle.push({height:44});
            cellCenterStyle.push({height:44});
        }
        return(

            <View style={[flexContainerStyle,backgroundColor,borderBottomColor]}>
                {this.renderLeft()}
                <View style={cellCenterStyle}>
                    {this.renderTitle()}
                </View>
                {this.renderListenImg()}
                {this.renderRight()}
            </View>

        );
    }
}

NavBarComponent.propTypes={
    leftButton:PropTypes.string,
    leftButtonImage:PropTypes.any,
    leftButtonImageStyle:PropTypes.any,
    hasLeftImage:PropTypes.bool,
    rightButton:PropTypes.string,
    title:PropTypes.string,
    leftButtonFunc:PropTypes.func,
    rightButtonFunc:PropTypes.func,
    rightButtonType:PropTypes.oneOf(['text','more']),//右侧按钮的类型，默认为文字(text),more则显示...，且rightButton失效
    titleImage:PropTypes.any,
    rightButtonImage:PropTypes.any,
    rightButtonImageStyle:PropTypes.any,
    backgroundColor:PropTypes.string,
    borderBottomColor:PropTypes.string,
    color:PropTypes.string,
    rightButtonColor:PropTypes.string,
    fontFamily:PropTypes.string,
    buttonFontSize:PropTypes.number,
    listenImg : PropTypes.any,
    listenImgClickFunc:PropTypes.func,
    listenImgStyle:PropTypes.any,
    headerType : PropTypes.oneOf(['header','headerExtr']),
    titleFontSize: PropTypes.number,
    //headerExtr属性
    //是否登录
    logined:PropTypes.bool,
    //位置
    location:PropTypes.string,
    //提示语
    btnText:PropTypes.string,
    //标题栏样式类型
    headerStyle:PropTypes.oneOf(['normal','small']),
    onLayout:PropTypes.func,
    disabled:PropTypes.bool,
    //设置标题处的属性
    titleParams:PropTypes.object
};

NavBarComponent.defaultProps = {
    hasLeftImage:true,
    rightButtonType:'text',
    headerType : 'header',
    // color: Color.title,
    // rightButtonColor: Color.title,
    logined:false,
    headerStyle:'normal',
    disabled:false,
    titleParams:{},
    // titleFontSize:Fonts.titleFontSize
};

